<template>
  <div>
    <MyProduct
    v-for="item in list" 
    :key="item.id"
    :title="item.proname"
    :price="item.proprice"
    :info="msg"
    @yes= 'kan'
    :id="item.id"
    />
  </div>
</template>

// 父传子:1.先导入子组件
          2.在父组件里给子组件标签添加自定义属性
          3.在子组件里用props接收 props:['传过去的数据'] 
            props里数据类似data里的
  注意：在子组件里不能更改传送过去的数据，只能通过父组件更改，流下去
       props里的数据是只读的


  子传父：1.先在父组件里自定义事件  @自定义事件="事件处理函数"
          2.在子组件特定的时机里触发这个事件，
          时机满足触发父组件传过去的事件
          3.用this.$emit('自定义事件',数据) 接收
          4.触发事件之后再传给父组件进行事件处理函数


<script>
import MyProduct from './components/MyProduct.vue'
   
export default {
components:{
 MyProduct //:MyProduct
//  (组件名:组件对象) ES6语法 相同的写一个
},

  data() {
    return {
      msg:'爱吃鸡',
      list:[
        { id: 1, proname: "超级无敌椰子鸡儿", proprice: 69 },
        { id: 2, proname: "超级无敌棒棒鸡儿", proprice: 59 },
        { id: 3, proname: "超级无敌钵钵鸡儿", proprice: 49 },
      ]
    };
  },
  methods:{
    kan(id){
       const obj= this.list.find(item => item.id === id)
       obj.proprice=obj.proprice - 10

    }
  }
};
</script>

<style>

</style>